<template>
  <div class="flex justify-center items-center min-h-screen bg-gradient-to-r from-pink-300/70 to-blue-500/30">
    <div class="flex justify-center items-center min-h-1/2">
      <div class="card-outer">
        <transition mode="out-in" name="fade">
          <div :key="currentComponent">
        <el-row style="">
          <el-col :span="12">
            <Register v-if="currentComponent === 'register'" @switch-to-login="handleRegisterSuccess" />
          </el-col>
          <el-col :span="12">
            <Login :userEmail="email" v-if="currentComponent === 'login'" @switch-to-register="showRegister" />
          </el-col>
        </el-row>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import Login from "./login.vue";
import Register from "./register.vue";
import {ref} from "vue";
const email = ref('')
const currentComponent = ref('login'); // 初始显示 Login 组件

const showLogin = () => {
  currentComponent.value = 'login';
};

const showRegister = () => {
  currentComponent.value = 'register';
};
const handleRegisterSuccess = (userEmail) => {
  email.value = userEmail; // 将注册的邮箱存储起来
  showLogin(); // 切换到登录组件
};
</script>
<style scoped>
.card-outer{
  min-width: 640px;            /* 最小宽度 */
  min-height: 380px;           /* 最小高度 */
  background-color: white;     /* 背景颜色为白色 */
  border-radius: 18px;         /* 圆角半径为20px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 边框阴影 */
  padding: 0px;               /* 内边距，视情况可调整 */
  margin: 20px;                /* 外边距，视情况可调整 */
  font-family: Cursive;
  /* 设置背景图片 */
  background-image: url("~/image/bg.jpg");
  background-size: cover;      /* 背景图片铺满 */
  background-position: center;  /* 背景图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.5s ease; /* 过渡效果持续时间 */
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(20px); /* 向下滑入 */
  opacity: 0; /* 初始和结束时的透明度 */
}
</style>